<template>
  <div>
    <section class="container">
      <div id="card" :class="{ flipped: isActive }">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
      </div>
    </section>
    <p><button id="flip" @click="doOK">Flip Card</button></p>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Component from 'class-component'

  @Component
  export default class TestCss extends Vue {
    isActive = false
    mounted () {
      console.log('mounted')
    }
    doOK () {
      this.isActive = !this.isActive
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 200px;
    height: 260px;
    position: relative;
    margin: 40px auto 40px;
    border: 1px solid #CCC;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
  }

  #card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
  }

  #card.flipped {
    -webkit-transform: translateX( -100% ) rotateY( -180deg );
    -moz-transform: translateX( -100% ) rotateY( -180deg );
    -o-transform: translateX( -100% ) rotateY( -180deg );
    transform: translateX( -100% ) rotateY( -180deg );
  }

  #card figure {
    margin: 0;
    display: block;
    height: 100%;
    width: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 140px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  #card .front {
    background: red;
  }

  #card .back {
    background: blue;
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
  }
  #flip{margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;background: #fff;}
</style>
